import 'package:flutter/material.dart';
import 'package:flutter_neumorphic/flutter_neumorphic.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/constant.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/modules/init/controllers/init_controller.dart';
import 'package:mziot/app/tools/tools.dart';
import 'package:mziot/generated/locales.g.dart';

class TimezoneView extends GetView<InitController> {
  TimezoneView() {
    Future.delayed(Duration(milliseconds: 100), () {
      controller.setupTimeZone();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.timezone_title.tr),
      ),
      body: Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(height: 24),
            _titleView,
            SizedBox(height: 32),
            _searchView,
            Expanded(child: _listView),
          ],
        ),
      ),
    );
  }

  get _titleView {
    return Container(
      alignment: Alignment.centerLeft,
      child: Text(
        LocaleKeys.timezone_select.tr,
        style: MFont.semi_Bold24.apply(color: MColor.xFF333333),
      ),
    );
  }

  get _searchView {
    return Container(
      child: TextField(
        controller: controller.controller,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 0),
          prefixIcon: Icon(
            Icons.search,
            size: 24,
            color: MColor.xFF999999,
          ),
          fillColor: MColor.xFFEEEEEE,
          filled: true,
          isDense: true,
          hintText: LocaleKeys.timezone_search.tr,
          hintStyle: MFont.regular13.apply(color: MColor.xFF999999),
          labelStyle: MFont.regular13.apply(color: MColor.xFF333333),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MColor.xFFEEEEEE, width: 0),
            borderRadius: BorderRadius.circular(5),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: MColor.xFFEEEEEE, width: 0),
          ),
          constraints: BoxConstraints(maxHeight: 40),
        ),
        onChanged: (text) {
          controller.searchWords();
        },
      ),
    );
  }

  get _listView {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 4),
      child: Obx(() {
        return ListView.builder(
          itemCount: controller.dataList.value.length,
          controller: controller.scrollController,
          itemBuilder: (ctx, index) {
            return GestureDetector(
              behavior: HitTestBehavior.translucent,
              child: Obx(() {
                var color = MColor.xFF333333;
                if (controller.selectedIndex.value == index) {
                  color = MColor.skin;
                }
                return Row(
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 12),
                        Text(
                          controller.dataList.value[index].zone,
                          style: MFont.regular15.apply(color: color),
                        ),
                        SizedBox(height: 4),
                        Text(
                          controller.dataList.value[index].time,
                          style: MFont.regular11.apply(color: color),
                        ),
                        SizedBox(height: 12),
                      ],
                    ),
                    Spacer(),
                    Offstage(
                      offstage: !(controller.selectedIndex.value == index),
                      child: Icon(
                        Icons.check_outlined,
                        color: MColor.skin,
                        size: 30,
                      ),
                    ),
                  ],
                );
              }),
              onTap: () {
                showCustomDialog(
                  LocaleKeys.timezone_alert.tr,
                  onConfirm: () {
                    int xIndex = controller.dataList.value[index].index;
                    final code = Constant.codeList[xIndex].toString();
                    controller.fetchUpdateZone(code);
                  },
                  cancel: true,
                );
              },
            );
          },
        );
      }),
    );
  }
}
